
<template>
	<view class="ts-flex ts-column ts-flex-item">

		<view class="ts-flex ts-column">
			<view class="ts-list">
				<view class="ts-list-cell" hover-class="ts-list-cell-hover" v-for="(item,key) in productList" :key="key">
					<view class="ts-media-list">
						<image class="ts-media-list-logo" :src="item.img"></image>
						<view class="ts-media-list-body">
							<view class="ts-ellipsis-2">{{item.title}}</view>
							<view>{{item.seller_count}}</view>
							<view style="width: 100%; justify-content: space-between;">
								<view>
									<view>￥{{item.price/100}}</view>
									<view class="ts-text-discount ts-text-red">￥{{item.origin_price/100}}</view>
								</view>
								<view>
									<button type="warn" size="mini" :data-product="item" @tap="buy">购买</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="ts-flex ts-column">
			<ts-load-more :loadingType="loadingType"  @tap="getProductList"></ts-load-more>
		</view>

	</view>
</template>

<script>
	import tsLoadMore from 'components/teaset/components/ts-load-more/ts-load-more.vue'
	var self;
	export default {
		components: {
			tsLoadMore
		},
		data() {
			return {
				loadingType: 0, //上拉的状态：0-loading前；1-loading中；2-没有更多了
				// 				contentText: {
				// 					contentdown: "上拉显示更多",
				// 					contentrefresh: "正在加载...",
				// 					contentnomore: "没有更多数据了"
				// 				},
				shopId: '682731',
				productList: [],
				page: 0,
			}
		},
		onLoad: function() {
			self = this;
			//尝试加载第一页数据
			this.getProductList();
		},
		onReachBottom() {
			console.log("onReachBottom");
			this.getProductList();
		},
		methods: {
			getProductList() {
				//上拉的状态：0-loading前；1-loading中；2-没有更多了
				if (this.loadingType !== 0) {
					return;
				}
				this.loadingType = 1;
				this.page = this.page + 1;
				const api = 'https://api.beidian.com/mroute.html?method=beidian.h5.shop.product.list';
				let url = `${api}&page=${this.page}&shop_id=${this.shopId}`;
				console.log(url);
				uni.request({
					url: url,
					success: (res) => {
						const data = res.data;
						//合并当前页面的数据
						self.productList = self.productList.concat(data.temai_products);
						if (!data.has_more) {
							self.loadingType = 2; //2-没有更多了
							return
						}
						self.loadingType = 0; //开启新一轮加载
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				});
			},
			buy(e) {
				let product = e.target.dataset.product;
				console.log(product)
				let api = `https://m.beidian.com/detail/detail.html?iid=${product.iid}&shop_id=${this.shopId}`;
				//#ifdef APP-PLUS
				plus.runtime.openURL(api);
				//#endif
				//#ifdef MP-WEIXIN
				uni.setClipboardData({
					data: api,
					success: function() {
						uni.showModal({
							title: '提示',
							content: '链接已复制，请在浏览器中访问',
							showCancel: false,
						});
					}
				})
				//#endif
			}
		},
	}
</script>

<style>

	.ts-media-list-logo {
		height: 200upx;
		width: 200upx;
	}

	.ts-media-list-body {
		font-size: 30upx;
		height: 200upx;
		display: flex;
		/* flex: 1; */
		flex-direction: column;
	}
</style>

